<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="./style.css" />
    <title>04_全屏覆盖式响应导航菜单</title>
  </head>
  <body class="box-border select-none bg-[url(../assets/images/bg_09.jpg)]">
    <div
      id="toggleIcon"
      onclick="menuTogger()"
      class="fixed top-5 right-5 w-[50px] h-[50px] rounded-full transition duration-300 z-10 cursor-pointer"
    ></div>
    <div
      id="menu-overlay"
      class="fixed py-[10px] top-1/2 left-1/2 border-[1px] border-[#dadada] rounded-[1rem] bg-[#dadada15] backdrop-blur-md grid place-items-center overflow-y-auto transform duration-500"
    >
      <ul class="relative">
        <li class="relative list-none text-center block">
          <a
            href=""
            class="px-2 le relative text-[3.5rem] text-white font-bold uppercase inline-block active:transititon hover:duration-300 hover:scale-110"
          >
            Home
          </a>
        </li>
        <li class="relative list-none text-center block">
          <a
            href=""
            class="px-2 relative text-[3.5rem] text-white font-bold uppercase inline-block active:transititon hover:duration-300 hover:scale-110"
          >
            About
          </a>
        </li>
        <li class="relative list-none text-center block">
          <a
            href=""
            class="px-2 relative text-[3.5rem] text-white font-bold uppercase inline-block active:transititon hover:duration-300 hover:scale-110"
          >
            Services
          </a>
        </li>
        <li class="relative list-none text-center block">
          <a
            href=""
            class="px-2 relative text-[3.5rem] text-white font-bold uppercase inline-block active:transititon hover:duration-300 hover:scale-110"
          >
            Portfolio
          </a>
        </li>
        <li class="relative list-none text-center block">
          <a
            href=""
            class="px-2 relative text-[3.5rem] text-white font-bold uppercase inline-block active:transititon hover:duration-300 hover:scale-110"
          >
            Our Team
          </a>
        </li>
        <li class="relative list-none text-center block">
          <a
            href=""
            class="px-2 relative text-[3.5rem] text-white font-bold uppercase inline-block active:transititon hover:duration-300 hover:scale-110"
          >
            Contact
          </a>
        </li>
      </ul>
    </div>
    <script>
      function menuTogger() {
        const nav = document.getElementById('menu-overlay')
        nav.classList.toggle('active')
        const btn = document.getElementById('toggleIcon')
        btn.classList.toggle('active')
      }
    </script>
  </body>
</html>
